<template>
  <div id="quick-chat-view">
    <div>
      <AI />
    </div>
    <ul>
      <template v-for="userInfo of store.state.userList" :key="userInfo.id">
        <li style="display:none;" v-if="userInfo.username === store.state.username">
          
          {{ userInfo.username }}
        </li>
        <li v-else>
          <a
            href="javascript:;"
            @click="goDetail(userInfo)"
          >
          <!-- <img src="/img/aaa.png" alt=""> -->
            {{ userInfo.username }}
          </a>
        </li>
      </template>
    </ul>
  </div>
</template>

<script setup lang="ts">
import AI from "./chatAi/Chat_ai.vue";
import { io } from "socket.io-client";
import { useCounterStore } from "../../../../stores/counter";
import { computed, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useCounterStore();
// console.log(store.state.targetUser, "12987");

//跳转用户详情
const goDetail = (userInfo) => {
  // console.log(userInfo, "id");
  store.selectUser(userInfo);
  router.push({
    path: "/chatDetail",
    query: { username: store.state.username },
  });
};
</script>

<style scoped>
#quick-chat-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.chat-item {
  width: 100%;
  height: 100px;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #ccc;
}
.img img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 10px 0 0 0;
}
</style>   